<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		*{margin:0;padding:0;list-style: none}
		.box{
			position:absolute;
			left: 0;
			width: 100px;
			height: 100px;
			background-color:#f00;

		}
	</style>
</head>
<body>
	<input type="button" id="btn" value="按钮">
	<div class="box"></div>
	<script type="text/javascript" src="requestAnimation.js"></script>
	<script type="text/javascript" src="tween.js"></script>
	<script type="text/javascript">
		/*
		
		t, 当前执行动画第几次 
		b, 起始值
		c, 起始值和结束值 之间的差值
		d  动画执行总次数
		 */
		var btn = document.querySelector('#btn');
		var box = document.querySelector('.box');
		var t, b, c, d;
		t = 0;
		b = 0;
		c = 300;
		d = 10;

		btn.onclick = function(){
			t++;
			var val = Tween['linear'](t,b,c,d);
			box.style.left = val + 'px';
		}
	</script>
</body>
</html>
